<template>
  <div>
    <div class="layout-header">
      <div class="layout-logo">
        <router-link to="/home" name="home">
          <span>Pock</span>
        </router-link>
      </div>
      <div class="layout-menus">
        <Menu mode="horizontal" active-name="home">
          <div v-for="v in menus" :key="v.name">
            <template v-if="!v.hidden">
              <Submenu v-if="v.children && v.children.length" :to="v.path" :name="v.title">
                <template #title>
                  <Icon type="ios-navigate"></Icon>
                  {{ v.title }}
                </template>
                <MenuItem v-for="v1 in v.children" :key="v1.path" :to="v1.path" :name="v1.title">
                <Icon type="ios-navigate"></Icon>
                {{ v1.title }}
                </MenuItem>
              </Submenu>
              <MenuItem v-else :to="v.path" :name="v.title">
              <Icon type="ios-navigate"></Icon> {{ v.title }}
              </MenuItem>
            </template>
          </div>
        </Menu>
      </div>
    </div>
    <div class="layout-content">
      <slot>
        <router-view />
      </slot>
    </div>
    <div class="layout-footer">
      <p>
        <a class="b_b" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备19002337号-1</a>
        |
        <a class="b_b" href="https://beian.miit.gov.cn/" target="_blank">2019-2029 © Sora</a>
      </p>
    </div>
  </div>
</template>
<script>
import menus from "@/router/menus";
import logo from '../../views/home/components/logo.vue';
export default {
  components: { logo },
  data() {
    return {
      menus
    };
  }
};
</script>
<style lang="less" scoped>
.b_b {
  color: #fff;
  margin: 0 5px;
}



.layout-header {
  display: flex;
  width: 100%;
  height: 60px;
  font-weight: 600;
  align-items: center;
}

.layout-logo {
  font-size: 2rem;
  color: transparent;
  background-clip: text;
  background-image: url('~@/assets/mesh.png');
}

.layout-menus {
  color: aliceblue;
  text-align: left;
  width: 50%;
  display: block
}

.layout-content {
  text-align: left;
  height: calc(100vh - 3rem - 60px)
}

.layout-footer {
  width: 100%;
  background-clip: text;
  text-align: center;
  line-height: 3rem;
  font-size: 1rem;
  color: aliceblue;
  background-color: #1061af;
  font-weight: 400;
}
</style>

